const path = require("path");
const webpack = require('webpack')
const HtmlWebpackPlugin  = require('html-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const appDirectory = path.resolve(__filename, "../");

module.exports = {
  entry:  appDirectory+"/src/js/enter.js",
  output: {
    path: appDirectory + "/dist",
    filename: "bundle.js",
    
///// HtmlWebpackPlugin 使用后，就不需要下面的 publicPath
    // publicPath: appDirectory +'/dist/', // 如果图片资源 和  index.html 不在一起，需要配置
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 71,
              name: 'images/[name]_[hash:5].[ext]',
            },
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name]_[hash:10].[ext]', //默认 32位hash值（哈希）
            }
          }
        ]
      },
      {// 讲解的很好：https://www.cnblogs.com/QianDingwei/p/10800795.html
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, //排除
        use: {
          loader: 'babel-loader',
          options: {
            // presets: ['@babel/preset-env'] //目前还没有用到
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        exclude: /(node_modules|bower_components)/, //排除
        use: {
          loader: 'vue-loader',
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    },
    extensions: ['*', '.js', 'css','.vue', '.json'] //导入时 可以不用写扩展名
  },
  plugins: [ //插件配置
    new webpack.BannerPlugin('learn-v2\n(c) 2020 srx\nReleased under the MIT License.'),
    new HtmlWebpackPlugin({ 
      template: './index.html' //把这个index当模版插入到 dist/ 目录下
    }),
    // new UglifyJsPlugin() // 丑化/混淆，在开发阶段，不要开启，不好调试 //开发阶段不该有的
  ],

  //正式开发，这个是不需要的，也不该有的 --- ·可以在 package.json 里面配置·
  devServer: { //配置 webpack-dev-server 也可以使用cli启动
    contentBase: './dist', //为哪一个 文件夹/目录 提供本地服务，默认是根 文件夹/目录。
    inline: true,  //也是实时刷新
    port: 3333,    //端口号 默认8080， 最好改一个，RN React等好多都是8080
    // historyApiFallback:  //在SPA(单文件组件 )页面中，依赖html的history模式
  }
};


// if (process.env.NODE_ENV === 'production') {
//   module.exports.devtool = '#source-map'
//   // http://vue-loader.vuejs.org/en/workflow/production.html
//   module.exports.plugins = (module.exports.plugins || []).concat([
//     new webpack.DefinePlugin({
//       'process.env': {
//         NODE_ENV: '"production"'
//       }
//     }),
//     new webpack.optimize.UglifyJsPlugin({
//       sourceMap: true,
//       compress: {
//         warnings: false
//       }
//     }),
//     new webpack.LoaderOptionsPlugin({
//       minimize: true
//     })
//   ])
// }
